<template>
  <div class="tiktok-room-detail" v-if="show_page">
    <c-title text="直播间"></c-title>
    <div class="head">
      <div class="detail">
        <div class="flex">
          <img class="photo" :src="details.author_pic" alt />
          <div>
            <div class="flex">
              <span class="name">{{ details.author_name }}</span>
              <div class="on-line" v-if="details.is_live" style="height: 1.2rem;">
                <span class="line line-1"></span>
                <span class="line line-2"></span>
                <span class="line line-3"></span>
                <span>直播中</span>
              </div>
            </div>
            <div class="fans">粉丝 | {{ details.fans_num }}</div>
          </div>
        </div>
        <div style="display: flex; flex-wrap: wrap;">
          <span v-for="(item, i) in details.product_category" class="category" :class="{ 'ml-128': i == 0 }"
            :key="item">{{ item }}</span>
        </div>
      </div>
      <div class="flex around mt46 mb26">
        <div class="flex column">
          <span class="fz26 c-999">直播商品</span>
          <span class="fz30 mt20">{{ details.product_count }}</span>
        </div>
        <div class="flex column">
          <span class="fz26 c-999">场均GMV</span>
          <span class="fz30 mt20">{{ details.average_gmv }}</span>
        </div>
        <div class="flex column">
          <span class="fz26 c-999">粉丝数</span>
          <span class="fz30 mt20">{{ details.fans_num }}</span>
        </div>
      </div>
      <div class="main-color"
        style="color: #fff; width: 13.3125rem; height: 2rem; line-height: 2rem; margin: 0 auto; border-radius: 0.25rem;"
        @click="copy_handle(details.author_openid, 'room')">进入抖音直播间</div>
    </div>
    <template v-if="details && details.products && details.products.length !== 0">
      <div style="font-size: 0.8125rem; color: #333; margin-top: 0.75rem;">直播好物</div>
      <div class="list">
        <div class="list-item" v-for="item in details.products" :key="item.id">
          <div class="img">
            <van-image width="100%" height="100%" :src="item.cover" />
          </div>
          <div class="title">
            <span>
              <span class="tik-tok-text">抖音</span>
              <span>{{ item.title }}</span>
            </span>
          </div>
          <div class="item-center">
            <div class="make-money" v-if="item.share_reward">
              <span class="p-4 fs-10 line-right">赚</span>
              <span class="p-4 fs-10">{{ item.share_reward }}</span>
            </div>
            <div class="buy">{{ item.sales }}</div>
          </div>
          <div class="item-bottom">
            <div class="c-FF6238" style="font-size: 0.75rem;">
              到手价
              <span class="ml-4" style="font-size: 0.875rem;"><small>{{ $i18n.t('money') }}</small>{{ item.coupon_price
}}</span>
            </div>
            <div class="fs-12 c-999 line-through ml-12"><small>{{ $i18n.t('money') }}</small>{{ item.price }}</div>
          </div>
          <div class="btn" @click="copy_handle(item.detail_url, 'goods', item.cover, item.title)">前往直播间抢购</div>
        </div>
      </div>
    </template>
    <div class="card_no" v-else>
      <img src="../../../assets/images/cart.png" style="width: 6.25rem; height: 6.25rem;" />
      <br /><span style="line-height: 1.125rem; font-size: 1rem;">暂无好物</span>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="detail">
            <div class="flex">
              <template v-if="type == 'room'">
                <img :src="details && details.author_pic" style="width: 1.5rem; height: 1.5rem; border-radius: 3.125rem;"
                  alt />
                <div class="flex">
                  <span class="name" style="margin: 0 0.25rem;">{{ details.author_name }}</span>
                  <div class="on-line" style="height: 1.1rem;" v-if="details.is_live">
                    <span class="line line-1"></span>
                    <span class="line line-2"></span>
                    <span class="line line-3"></span>
                    <span>直播中</span>
                  </div>
                </div>
              </template>
              <template v-else>
                <img :src="goods_cover" style="width: 2.75rem; height: 2.75rem; border-radius: 0.125rem;" alt />
                <div style="margin: 0 2.125rem 0 0.5rem; font-size: 0.8125rem;">{{ goods_title }}</div>
              </template>

            </div>
          </div>
          <div class="close" @click="show = false">
            <van-icon name="cross" />
          </div>
          <p class="link_dy">
            {{ dy_password }}</p>
          <div style="position: relative; bottom: 5%; left: 0; right: 0;">
            <div class="copy-btn" v-clipboard:copy="dy_password" v-clipboard:success="onCopy"
              v-clipboard:error="onError">
              <template v-if="type == 'goods'"> 一键复制，打开抖音APP下单</template>
              <template v-if="type == 'room'">前往直播间抢购</template>
            </div>
            <p style="color: #999; margin-top: 0.5rem; font-size: 0.625rem;" v-if="type == 'room'">复制口令打开抖音APP进入直播间</p>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Image as VanImage } from "vant";
import { scrollMixin } from "../../../utils/mixin";
import { Toast } from "vant";
export default {
  mixins: [scrollMixin],
  components: { VanImage },
  data() {
    return {
      show: false,
      type: "",
      goods_cover: "",
      goods_title: "",
      details: {},
      dy_password: "",
      dy_deeplink: "",
      show_page: false,
    };
  },
  async activated() {
    // this.show_page=false;
    this.$nextTick(() => {
      document.documentElement.scrollTop = 0;
    });
    if (this.$route.params.data) {
      localStorage.setItem("tiktok_detail", JSON.stringify(this.$route.params.data))
    }
    this.details = JSON.parse(localStorage.getItem("tiktok_detail")) || {};
    this.getNetWork(); // 页面刷新没有请求获取不到主题色
  },
  methods: {
    async getNetWork() {
      let { result } = await $http.post('plugin.tiktok-cps.api.live.tranfer-link', { openid: this.details.author_openid }, 'loading');
      if (result) {
        this.show_page = true;
      }
      console.log(result)
    },
    onCopy(e) {
      Toast({
        message: "口令已复制，打开抖音app下单！",
        position: "bottom",
        duration: 1000
      });
      this.show = false;
    },
    onError(e) {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 1000
      });
    },
    async copy_handle(id, type, goods_cover, goods_title) {



      this.type = type;
      if (type == 'room') {
        let { result, msg, data } = await $http.post('plugin.tiktok-cps.api.live.tranfer-link', { openid: id });
        if (result == 0) {
          return this.$toast(msg);
        }
        this.dy_password = data.dy_password;
        this.dy_deeplink = data.dy_deeplink;
        if (this.fun.isCPS()) {
          let json = { dy_deeplink: data.dy_deeplink };
          if (this.fun.isIosOrAndroid() === "ios") {
            IOStoTikTok(JSON.stringify(json))
          } else {
            androidToTikTok(data.dy_deeplink)
          }
          return;
        } else {
          this.show = true;
        }
      } else {
        this.goods_cover = goods_cover;
        this.goods_title = goods_title;
        let { result, msg, data } = await $http.get('plugin.tiktok-cps.api.goods.tranfer-link', { detail_url: id });
        if (result == 0) {
          return this.$toast(msg);
        }
        this.dy_password = data.dy_password;
        this.dy_deeplink = data.dy_deeplink;
        if (this.fun.isCPS()) {
          let json = { dy_deeplink: this.dy_deeplink };
          if (this.fun.isIosOrAndroid() === "ios") {
            IOStoTikTok(JSON.stringify(json))
          } else {
            androidToTikTok(data.dy_deeplink)
          }
          return;
        } else {
          this.show = true;
        }

      }
    },

  }
};
</script>

<style lang='scss' scoped>
.tiktok-room-detail {
  .main-color {
    background-color: var(--themeBaseColor);
    border: 1px solid var(--themeBaseColor);
  }

  .card_no {
    height: 6.25rem;
    margin: 6.25rem 0 6.25rem;
    color: #ccc;
    font-size: 12px;
    text-align: center;
  }

  .copy-btn {
    width: 100%;
    background-color: var(--themeBaseColor);
    height: 2.0313rem;
    line-height: 2.0313rem;
    text-align: center;
    color: #fff;
  }

  .link_dy {
    margin-top: 1.0625rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color: #999;
    font-size: 0.75rem;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .close {
    position: absolute;
    right: 3%;
    top: 1%;
  }

  .block {
    position: relative;
    width: 17.5rem;
    border-radius: 0.25rem;
    background-color: #fff;
    padding: 1.25rem 0.625rem;
  }

  .btn {
    padding: 0.375rem 2.0313rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    color: #fff !important;
    background-color: var(--themeBaseColor) !important;
    border: 1px solid var(--themeBaseColor) !important;
  }

  .buy {
    color: #999;
    font-size: 0.75rem;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem;
    justify-content: space-between;

    .list-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 49%;
      overflow: hidden;
      background: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin-bottom: 0.75rem;
    }
  }

  .ml-12 {
    margin-left: 0.75rem;
  }

  .line-through {
    text-decoration: line-through;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .c-999 {
    color: #999;
  }

  .fs-12 {
    font-size: 0.75rem;
  }

  .ml-4 {
    margin-left: 0.25rem;
  }

  .item-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.3rem;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .make-money {
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .line-right {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0.0313rem;
        height: 100%;
        background: #ff7b05;
      }
    }
  }

  .title {
    display: flex;
    text-align: left;
    padding: 0.1875rem 0.5rem 0.375rem;
  }

  .item-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
  }

  .tik-tok-text {
    color: rgb(255, 255, 255);
    background: rgb(0, 0, 0);
    padding: 0 5px;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 0.75rem;
  }

  .mb26 {
    margin-bottom: 0.8125rem;
  }

  .mt20 {
    margin-top: 0.625rem;
  }

  .mt46 {
    margin-top: 1.4375rem;
  }

  .c-999 {
    color: #999;
  }

  .fz30 {
    font-size: 0.9375rem;
  }

  .fz26 {
    font-size: 0.8125rem;
  }

  .column {
    flex-direction: column;
  }

  .around {
    justify-content: space-around;
  }

  .photo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 3.125rem;
    margin-right: 0.5rem;
  }

  .ml-128 {
    margin-left: 3rem !important;
  }

  .category {
    padding: 0.125rem 0.5rem;
    border-radius: 0.4688rem;
    color: #ff6238;
    border: 1px solid #ff6238;
    margin: 0.125rem;
  }

  .fans {
    color: #999;
    font-size: 0.75rem;
  }

  img {
    margin: 0;
  }

  .flex {
    display: flex;
  }

  .head {
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: #fff;
  }

  .detail {
    text-align: left;
  }

  .name {
    font-size: 0.8125rem;
  }

  .on-line {
    position: relative;
    margin-left: 0.1875rem;
    background: #333;
    color: #fff;
    border-radius: 0.125rem;
    padding: 0.125rem 0.25rem;
    font-size: 0.6875rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  @keyframes animate_2 {
    0% {
      top: 60%;
    }

    50% {
      top: 0%;
    }

    100% {
      top: 60%;
    }
  }

  .line-1 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.4s infinite;
    }
  }

  .line-2 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.25s infinite;
    }
  }

  .line-3 {
    position: relative;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: white;
      animation: animate_2 1.1s infinite;
    }
  }

  .line {
    position: relative;
    display: inline-block;
    width: 0.0938rem;
    height: 0.625rem;
    border-radius: 0.125rem;
    margin-right: 0.25rem;
  }
}
</style>